{extend name="main_mobile"}
{block name="style"}
<style type="text/css">
	.flex-lable{width: 120px;color: #6c757d;text-align: right;padding-right: 10px;}
	.el-image-viewer__img{transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -o-transition: all .3s;}
	.w-400px{width: 400px !important;}
	.status{position: absolute;right: 5px;top: 5px;background-color: #FFF;border: solid 1px #FF6D06;color: #FF6D06;width: 60px;height: 20px;line-height: 18px;text-align: center;border-radius: 10px;z-index: 100;}
	.status.success{border: solid 1px #28a745;color: #28a745;}
	.status.danger{border: solid 1px #dc3545;color: #dc3545;}
	.checkbox-id{position: absolute;left: 5px;top: 5px;}
	.checkbox-id .el-checkbox__label{display: none;}
	.w-100px{width: 100px;}
</style>
{/block}
{block name="body"}
<div class="bg-white mb-3 table-responsive p-3">
	<el-form :model="search" @submit.native.prevent="submitForm" ref="search"
	  label-position="right">

	  	<div class="flex flex-center">
		  	<div>
			  	<el-select v-model="search.search_type" placeholder="请选择" class="w-80px">
				    <el-option key="company_id"label="公司ID"value="company_id"></el-option>
				    <el-option key="company_name"label="公司名"value="company_name"></el-option>
				</el-select>
		  	</div>
		  	<div class="mx-1 flex-1">
		    	<el-input v-model="search.key" placeholder="请输入你想搜索的关键词" clearable></el-input>
		  	</div>
		    <el-button type="primary" @click="sendHtml">查询</el-button>
		    <span class="text-nowrap px-2 py-3 small text-secondary"
		    @click="searchMore= !searchMore">{{searchMore?'收起':'更多'}}</span>
	  	</div>
	  	<div v-show="searchMore" style="display: none;" class="mt-3">
		  <el-form-item label="状态" prop="status">
		  	<el-select v-model="search.status" placeholder="请选择">
			    <el-option key="all"label="全部"value="all"></el-option>
			    <el-option :key="0"label="待审核":value="0"></el-option>
			    <el-option :key="1"label="已通过":value="1"></el-option>
			    <el-option :key="2"label="已拒绝":value="2"></el-option>
			</el-select>
		  </el-form-item>
	  	</div>
	</el-form>
</div>
<div class="bg-white p-3">
	<div class="table-responsive py-3 flex flex-center">
		<el-checkbox :indeterminate="indeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
		<div class="px-1"></div>
		<el-button type="success" size="mini" @click="setStatusALL(1)">批量通过</el-button>
		<el-button type="danger" size="mini" @click="setStatusALL(2)">批量拒绝</el-button>
	</div>
	<div class="row mx-0">
		<div class="col-6 mb-3" v-for="(v,index) in tableData">
			<div class="border position-relative">
				<el-checkbox v-model="multipleSelection"
				:label="v" class="checkbox-id text-center"></el-checkbox>
	      		<div class="status success small" v-if="v.status==1">已通过</div>
	      		<div class="status danger small" v-else-if="v.status==2">已拒绝</div>
	      		<div class="status info small" v-else-if="v.status=='loading'" :loading="true">加载中</div>
	      		<div class="status info small" v-else>待审核</div>
				<el-image
			    style="width: 100%; height: 160px;cursor: pointer;"
			    :src="v.url"
			    fit="cover"
			    @click="openImageViewer(index);"></el-image>
			    <div class="bg-light text-center py-2 small flex flex-center px-1">
			    	<div class="flex-1 text-truncate">{{v.title}}</div>
			    	<div class="pl-1"></div>
			    	<el-link type="success" @click="setStatus(v,1)" v-if="v.status===0">通过</el-link>
			    	<div class="pl-1"></div>
			    	<el-link type="danger" @click="setStatus(v,2)" v-if="v.status===0">拒绝</el-link>
			    </div>
		    </div>
		</div>
	</div>
	<div class="table-responsive py-3 text-center">
		<el-pagination
		  background
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page="search.page"
	      :page-sizes="[10,50,100,200]"
	      :page-size="search.pageSize"
	      layout="total, sizes, prev, next"
	      :total="search.total">
	    </el-pagination>
	</div>
</div>
<div class="el-image-viewer__wrapper" style="z-index: 2000;" v-if="viewer.index !== null">
	<div class="el-image-viewer__mask"></div>
	<span class="el-image-viewer__btn el-image-viewer__close" @click="closeImageViewer">
		<i class="el-icon-circle-close h4 mb-0"></i>
	</span>
	<span class="el-image-viewer__btn el-image-viewer__prev" @click="viewerPrev">
		<i class="el-icon-arrow-left"></i>
	</span>
	<span class="el-image-viewer__btn el-image-viewer__next" @click="viewerNext">
		<i class="el-icon-arrow-right"></i>
	</span>
	<div class="el-image-viewer__btn el-image-viewer__actions" :class="{'w-400px':tableData[viewer.index].status===0}">
		<div class="el-image-viewer__actions__inner" >
			<i class="el-icon-zoom-out" @click="viewerZoomOut"></i>
			<i class="el-icon-zoom-in" @click="viewerZoomIn"></i>
			<i class="el-image-viewer__actions__divider"></i>
			<i class="el-icon-full-screen" v-if="viewer.is_screen" @click="viewerIsScreen"></i>
			<i class="el-icon-c-scale-to-original" v-else @click="viewerIsScreen"></i>
			<i class="el-image-viewer__actions__divider"></i>
			<i class="el-icon-refresh-left" @click="viewerRotateLeft"></i>
			<i class="el-icon-refresh-right" @click="viewerRotateRight"></i>
			<i class="el-image-viewer__actions__divider" v-if="tableData[viewer.index].status===0"></i>
			<el-button-group class="text-nowrap" v-if="tableData[viewer.index].status===0">
			  <el-button type="success" size="mini" @click="setStatus(tableData[viewer.index],1,viewerNext())" icon="el-icon-check" round></el-button>
			  <el-button type="danger" size="mini" @click="setStatus(tableData[viewer.index],2,viewerNext())" icon="el-icon-close" round></el-button>
			</el-button-group>
		</div>
	</div>
	<div class="el-image-viewer__canvas">
		<img :src="tableData[viewer.index].url" class="el-image-viewer__img" :style="getViewerStyle()" ref="viewerImage" @mousewheel="viewerMousewheel">
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	var loading=null;
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			viewer:{
				index:null,
				scale:1,
				rotate:0,
				isDown:false,
				is_screen:true
			},
			multipleSelection:[],
			multipleSelectionIndex:0,
			searchMore:false,
			indeterminate:false,
			checkAll:false,
			search:{
				{notempty name=":request()->get('company_id')"}
				search_type:'company_id',
				key:'{:request()->get('company_id')}',
				{else/}
				search_type:'company_id',
				key:'',
				{/notempty}
				status:{:request()->get('status',"\'all\'")},
				ajax:false,
				page:1,
				total:0,
				pageSize:10
			},
			tableData:[],
		},
		watch:{
		    view:XYBase.viewWatch,
		    multipleSelection(val,oldVal){
		    	var count=val.length;
		    	var allCount=this.tableData.length;
		    	this.indeterminate=count>0&&count!==allCount;
		    	this.checkAll=count>0&&count===allCount;
		    },
		},
		created(){
			XYBase.created(this);
		},
	    methods: {
			checkboxT(row,index){
	    		if(row.status==0){
	    			return true;
	    		}else{
	    			return false;
	    		}
	    	},
		    handleCheckAllChange(val) {
		    	if(val){
		    		this.multipleSelection=this.tableData;
		    	}else{
		    		this.multipleSelection=[];
		    	}
		    },
	    	getSearchType(){
	    		var text='公司ID';
	    		switch(this.search.search_type){
	    			case 'company_id':
	    				text='公司ID';
	    				break;
	    			case 'company_name':
	    				text='公司名';
	    				break;
	    		}
	    		return text;
	    	},
	    	getViewerStyle(){
	    		var style={
	    			transform:'scale('+this.viewer.scale+') rotate('+this.viewer.rotate+'deg)'
	    		};
	    		if (this.viewer.is_screen) {
	    			style.maxHeight='100%';
	    			style.maxWidth='100%';
	    		}
	    		return style;
	    	},
	    	closeImageViewer(){
	    		document.body.style='';
	    		this.viewer.index=null;
	    	},
	    	openImageViewer(index){
	    		document.body.style="overflow: hidden;";
	    		this.viewer.index=index;
	    		this.viewer.scale=1;
	    		this.viewer.rotate=0;
	    		this.viewer.is_screen=true;
	    	},
	    	viewerMousewheel(event){
	    		if (event.deltaY>0) {
	    			if (this.viewer.scale<=0.2)return;
	    			this.viewer.scale=this.viewer.scale-0.02;
	    		}else{
	    			this.viewer.scale=this.viewer.scale+0.02;
	    		}
	    	},
	    	viewerZoomOut(){
	    		if (this.viewer.scale<=0.3)return;
	   			this.viewer.scale=this.viewer.scale-0.2;
	    	},
			viewerZoomIn(){
	   			this.viewer.scale=this.viewer.scale+0.2;
			},
	    	viewerIsScreen(index){
	    		this.viewer.scale=1;
	    		this.viewer.rotate=0;
	    		this.viewer.is_screen= !this.viewer.is_screen;
	    	},
	    	viewerRotateLeft(){
	    		this.viewer.rotate=this.viewer.rotate-90;
	    	},
			viewerRotateRight(){
	    		this.viewer.rotate=this.viewer.rotate+90;
			},
			viewerNext(){
				var index=this.viewer.index;
				if (this.tableData[this.viewer.index+1])
					this.viewer.index++;
				else
					XYBase.msg('已经是最后一张了');
			},
			viewerPrev(){
				var index=this.viewer.index;
				if (this.tableData[this.viewer.index-1])
					this.viewer.index--;
				else
					XYBase.msg('已经是第一张了');
			},
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
			handleSizeChange(val) {
				this.search.page=1;
				this.search.pageSize=val;
	          	this.initHtml();
			},
			setStatus(row,status,callback){
	    		if (row.status=='loading') return;
	    		var oldStatus=row.status;
	    		row.status='loading';
				$.ajax({
					url:'/company/demeanor/setStatus/'+row.id+'/'+status,
					type:'get',
					data:{},
					dataType:'json',
					error:function(err){
	    				row.status=oldStatus;
			          	XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
	    				row.status=oldStatus;
						if (ret) {
							if (ret.code === 0) {
								row.status=status;
								row.update_time=ret.time;
								XYBase.success(ret.msg);
								if (typeof callback=='function')
									callback();
							}else XYBase.msg(ret.msg);
						}else XYBase.error(XYBase.config.system_network_error);
					}
				})
			},
			setStatusALL(status){
				var _this=this;
				if (_this.multipleSelection.length<1)return;
				loading = XYBase.openloading();
				_this.multipleSelectionIndex=0;
				_this.setStatusALLAjax(status);
			},
			setStatusALLAjax(status){
				var _this=this;
				var D=_this.multipleSelection[_this.multipleSelectionIndex];
				if (D) {
					loading.setText((_this.multipleSelectionIndex+1)+'/'+_this.multipleSelection.length);
					$.ajax({
						url:'/company/demeanor/setStatus/'+D.id+'/'+status,
						type:'get',
						data:{},
						dataType:'json',
						error:function(err){
				          	loading.close();
							_this.multipleSelectionIndex=0;
					        _this.$refs.tableList.clearSelection();
						},
						success:function(ret){
							if (ret) {
								if(ret.code === 0){
									_this.multipleSelection[_this.multipleSelectionIndex].status=status;
									_this.multipleSelection[_this.multipleSelectionIndex].update_time=ret.time;
									_this.multipleSelectionIndex++;
									_this.setStatusALLAjax(status);
								}else{
									_this.multipleSelectionIndex++;
									_this.setStatusALLAjax(status);
								}
							}else{
								XYBase.error(XYBase.config.system_network_error);
					          	loading.close();
								_this.multipleSelectionIndex=0;
						        _this.$refs.tableList.clearSelection();
							}
						}
					})
				}else{
		          	loading.close();
					_this.multipleSelectionIndex=0;
			        _this.$refs.tableList.clearSelection();
			    	window.location.reload();
				}
			},
			handleCurrentChange(val) {
				this.search.page=val;
	          	this.initHtml();
			},
			sendHtml() {
				this.search.page=1;
	          	this.initHtml();
			},
	      	initHtml() {
	      		var _this=this;
	      		_this.search.ajax=true;
				$.ajax({
					url:'',
					type:'get',
					data:_this.search,
					dataType:'json',
					error:function(err){
	      				_this.search.ajax=false;
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
	      				_this.search.ajax=false;
						if (ret) {
							if (ret.code === 0) {
								_this.search.total=ret.data.total;
								_this.tableData=ret.data.data;
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
				});
			}
	    }
	});
	$(function(){
		vm.initHtml();
		reloadWindowSize();
		$(window).resize(function(){
			reloadWindowSize();
		});
	});
	function reloadWindowSize (argument) {
		var winW=$(window).width();
		if(winW <= 576){
			vm.labelPosition='top';
		}else{
			vm.labelPosition='right';
		}
	}
</script>
{/block}